<template>
  <div class="HomeNav headerWrapper">
    <div class="header">
      <div class="header-main clearfix">
        <div class="header-main-left">
          <ul>
            <li @click="navClick(1)">
              <router-link to="/" class="el-link el-link--default" :class="activeIndex==1?'el-link--primary':''">
                首页
              </router-link>
            </li>
            <li @click="navClick(2)">
              <router-link to="/catelog" class="el-link el-link--default" :class="activeIndex==2?'el-link--primary':''">
                我的清单
              </router-link>
            </li>
            <li @click="navClick(3)">
              <router-link to="/category" class="el-link el-link--default"
                           :class="activeIndex==3?'el-link--primary':''">
                分类
              </router-link>
            </li>
            <li @click="navClick(4)">
              <router-link to="/blog" class="el-link el-link--default" :class="activeIndex==4?'el-link--primary':''">
                文章
              </router-link>
            </li>
            <li @click="navClick(5)">
              <router-link to="/explore" class="el-link el-link--default" :class="activeIndex==5?'el-link--primary':''">
                探索
              </router-link>
            </li>
            <!--            <li @click="navClick(5)">-->
            <!--              <router-link to="/society" class="el-link el-link&#45;&#45;default" :class="activeIndex==5?'el-link&#45;&#45;primary':''">-->
            <!--                社区-->
            <!--              </router-link>-->
            <!--            </li>-->
            <!--            <li @click="navClick(6)">-->
            <!--              <router-link to="/admin/login" class="el-link el-link&#45;&#45;default"-->
            <!--                           :class="activeIndex==6?'el-link&#45;&#45;primary':''">-->
            <!--                后台登入-->
            <!--              </router-link>-->
            <!--            </li>-->
          </ul>
        </div>
        <div class="header-main-right">
          <div class="searchText">
            <el-input v-model="search" class="header-search" size="medium" @keyup.enter.native="toSearch"></el-input>
            <el-button @click="toSearch" type="primary" size="medium" class="header-search-btn"
                       icon="el-icon-search"></el-button>
          </div>
          <div class="user" @click="toUser">
            <el-dropdown @command="handleCommand">
              <div class="avatar">
                <el-avatar v-if="!user" :src="require('../assets/image/avatar.png')"></el-avatar>
                <el-avatar v-if="user" :src="user.avatar | filterImg"></el-avatar>
              </div>
              <el-dropdown-menu v-if="user" slot="dropdown">
                <el-dropdown-item command="home">个人中心</el-dropdown-item>
                <el-dropdown-item command="setting">设置</el-dropdown-item>
<!--                <el-dropdown-item command="setting">修改密码</el-dropdown-item>-->
                <el-dropdown-item command="logout">登出</el-dropdown-item>
              </el-dropdown-menu>

              <el-dropdown-menu v-if="!user" slot="dropdown">
                <el-dropdown-item command="login">登入</el-dropdown-item>
                <el-dropdown-item command="register">注册</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>

export default {
  name: "HomeNav",
  created() {
  },
  data() {
    return {
      activeIndex: -1,
      search: ''
    };
  },
  computed: {
    user() {
      return this.$store.getters.user
    }
  },
  methods: {
    navClick(index) {
      this.activeIndex = index;
    }
    ,
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toUser() {
      this.$router.push('/user/setting')
    },
    handleCommand(command) {
      let router = ""
      switch (command) {
        case "home":
          router = "/userIndex/blog";
          break
        case "setting":
          router = "/user/setting";
          break;
        case "logout":
          this.$store.dispatch('user/resetUserToken')
          return
        case "login":
          router = "/login"
          break
        case "register":
          router = "/register"
          break
      }
      this.$router.push(router)
    },
    logout() {
      this.$store.dispatch('user/resetToken')
      this.$router.push("/login")
      this.$message.success("退出成功")
    },
    toSearch() {
      this.$router.push({
        path: '/search',
        query: {
          keyword: this.search
        }
      })
    }
  },

}
</script>

<style scoped>

.HomeNav {
  height: var(--nav-height);
}

.header {
  width: 100%;
  background: #fff;
  height: var(--nav-height);
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
}

.header-main {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .container {
  height: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #dcdfe6;
}

.headerWrapper ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.headerWrapper li {
  height: var(--nav-height);
  padding: 0 15px;
  box-sizing: border-box;
  font-weight: 500;
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  display: flex;

  align-items: center;
}

.headerWrapper li a {
  font-size: 18px;
}

.header-main-left {
  /*float: left;*/
}

.searchText {
  height: var(--nav-height);
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
}

.header-main-right {
  /*float: right;*/
  height: var(--nav-height);
  max-height: 70px;
  display: flex;
  align-items: center;
}

.header-search {
  width: 230px;
}

.header-search >>> .el-input__inner {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.header-search-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.user {
  cursor: pointer;
}
</style>
